import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	Flex,
	WingBlank,
	Tools,
	Icon
} from 'weaver-mobile';
import {
	Route,
	withRouter,
} from 'react-router-dom';
import WorkFlow from './WorkFlow.js';
import Details from './Details.js';
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Abnormal extends Component {
	constructor(props){
		super(props);

		this.icons = {
			"EVECTION": {
				type: "on-a-business-trip",
				color: "#53b3ff"
			},
			"OUTDAYS": {
				type: "public-library",
				color: "#62DE7E"
			},
			"OVERTIME": {
				type: "overtime",
				color: "#FB6EE4"
			},
		}

		this.bgColors = ["#EDF5FF","#E6FCE9","#FDEDFC","#ECF1FD","#F1ECFF","#FAF0E8"];
	}

	getDefaultIconProps = () => {
		return {
			type: "collaboration-application-selected",
			color:["#7195f1", "#9356FF", "#FF9B56"][Math.floor(Math.random() * 3)]
		}
	}

	handleClick = (item) => {
		const {
			store,
			history
		} = this.props, {
			leaveWorkflowLayout,
			overtimeLayout,
			loadLeaveWorkflowInfo,
			loadKqDetailInfo,
			setKqType,
			getDetailCondition4Mobile,
		} = store;

		setKqType(item.type);
		
		if (item.type === "OVERTIME") { //加班明细
			history.push(overtimeLayout.path);
			getDetailCondition4Mobile().then(() => {
				loadKqDetailInfo({
					isScroll: false,
					type: "detail-with-search"
				});
			})
		} else {
			history.push(leaveWorkflowLayout.path);
			loadLeaveWorkflowInfo();
		}

	}

	render() {
		const {
			store,
			history,
		} = this.props, {
			abnormal,
			leaveWorkflowLayout,
			overtimeLayout,
		} = store;

		return (
			<WingBlank>
				<div className="attendance-abnormal">
					<div className="attendance-columns-title">{getLabel(132057,"异常考勤汇总")}</div>
					<div className="attendance-abnormal-content">
						{
							abnormal.map( (item,index) => {
								const {title, value, type} = item;

								return (
									<div className={`abnormal-content-item ${abnormal.length < 3 ? 'flexGrow' : ''}`} key={type} onClick={() =>( parseFloat(value) > 0  ) && this.handleClick(item)}>
										<div className="abnormal-icon-wrap">
											<div className="abnormal-icon" style={{backgroundColor:(index < 6) ? this.bgColors[index] : this.bgColors[Math.floor(Math.random() * 5)]}}>
												<Icon  size="sm" {...(this.icons[type] ? this.icons[type] : this.getDefaultIconProps())}/>
											</div>
										</div>
										<div className="abnormal-brief">
											<div className={( parseFloat(value) === 0 ) ? 'disabled-item' : ''}>{value}</div>
											<div>{title}</div>
										</div>
									</div>
								)
							})
						}
					</div>
				</div>
				<Route key={leaveWorkflowLayout.id} path={leaveWorkflowLayout.path} render={() => <WorkFlow store={store}/>}/>
				<Route key={overtimeLayout.id} path={overtimeLayout.path} render={() => <Details store={store} isPresentSearch={true} title={getLabel(33501,"加班明细")} history={history} type="overtime"/>}/>
			</WingBlank>
		);
	}
}